<template>
	<view class="user-coupon-detail" :style="{background:pageColor}" v-if="detail.id">
		<view class="space-lg"></view>
		<view class="flex-center flex-column" style="padding: 10rpx 40rpx 40rpx 40rpx"
			v-if="detail.use_scene && detail.status==1">
			<image class="qr-code" :src="detail.qr_code"></image>
			<view class="f-caption c-paragraph mt-md">请出示二维码核销卡券</view>
		</view>
		<view class="fill-base pd-lg mb-lg f-paragraph" style="color:#2A2A2A;border-radius:18rpx"
			v-if="detail.status==2 && detail.use_scene">
			<view class="flex-warp">
				<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
						class="iconfont iconhexiaomendian mr-sm"></i>核销门店:
				</view>
				<view class="flex-1 flex-warp text-bold" style="color:#242424;line-height:40rpx">
					{{detail.hx_store_name || '-'}}
				</view>
			</view>
			<view class="flex-warp mt-md">
				<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
						class="iconfont iconhexiaoren mr-sm"></i>核销人:</view>
				<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">{{detail.hx_user_name || '-'}}
				</view>
			</view>
			<view class="flex-warp mt-md">
				<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
						class="iconfont iconriqi mr-sm"></i>核销时间:</view>
				<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">{{detail.use_time || '-'}}
				</view>
			</view>
		</view>
		<!-- <view class="fill-base pd-lg mb-lg f-paragraph" style="color:#2A2A2A;border-radius:18rpx"
			v-if="detail.status==4">
			<view class="flex-warp">
				<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
						class="iconfont iconhexiaoren mr-sm"></i>作废人:</view>
				<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">{{detail.cancel_name || '-'}}
				</view>
			</view>
			<view class="flex-warp mt-md">
				<view class="flex-y-center" style="width:180rpx;height:40rpx"><i
						class="iconfont iconriqi mr-sm"></i>作废时间:</view>
				<view class="flex-1 text-bold" style="color:#242424;line-height:40rpx">{{detail.use_time || '-'}}
				</view>
			</view>
		</view> -->
		<view class="list-item rel fill-base">
			<view class="bg abs" :style="{background:primaryColor}"></view>
			<view class="flex-center rel" style="z-index: 2;">
				<view class="item-price flex-center flex-column c-base rel"
					:style="{background:`linear-gradient( 180deg, ${color} 0%, ${primaryColor} 100%)`}">
					<view class="dot-item abs fill-base radius left"></view>
					<view class="dot-item abs fill-base radius right"></view>
					<view class="flex-y-baseline f-sm-title text-bold">¥<view style="font-size:48rpx">
							{{detail.discount}}
						</view>
					</view>
					<view class="mt-sm f-icontext">{{detail.type==0?`满${detail.full}元可用`:'无门槛'}}</view>
				</view>
				<view class="flex-1 ml-lg" style="color:#1F1F1F">
					<view class="f-mini-title c-title text-bold max-450 ellipsis" style="margin: 5rpx 0;">
						{{detail.title}}
					</view>
					<view class="f-icontext mt-md">共{{detail.num}}张</view>
					<view class="flex-y-center f-icontext mt-sm">有效期至<view style="margin-left: 14rpx;">
							{{detail.end_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pd-lg mt-lg f-title text-bold" style="color:#1E1E1E">使用规则</view>

		<view class="fill-base pd-lg f-paragraph" style="border-radius: 18rpx;color:#2A2A2A">
			<view class="text-bold" style="color:#242424">使用规则</view>
			<view class="mt-md pb-md b-1px-b">
				<text decode="emsp" style="word-break:break-all;">{{detail.rule}}</text>
			</view>
			<view class="mt-md text-bold" style="color:#242424">优惠详情</view>
			<view class="mt-md pb-md b-1px-b">
				<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
			</view>
			<view class="mt-md text-bold" style="color:#242424">限用{{detail.use_scene?'门店':'服务'}}</view>
			<view class="mt-md">
				<view v-if="!detail.use_scene&&(detail.send_type==3 || detail.service.length==0)">
					{{detail.send_type==3?'所有服务':'-'}}
				</view>
				<span v-for="(item,index) in (detail.use_scene ? detail.store: detail.service)"
					:key="index">{{index==0?'':'、'}}{{item.title}}</span>
			</view>
			<view class="mt-md c-warning">{{detail.admin_id?'仅限部分城市可使用':'通用券'}}</view>
		</view>

		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '',
				detail: {},
				loading: true,
				lockTap: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapMutations(['']),
			async initIndex(refresh = false) {
				this.$util.showLoading()
				this.color = this.$util.rgbColor(this.primaryColor)
				let {
					id
				} = this.options
				let data = await this.$api.mine.userCouponInfo({
					id
				})
				if (data.use_scene && data.status == 1) {
					let qr_code = await this.$api.mine.couponHxQr({
						id
					})
					data.qr_code = qr_code
				}
				this.detail = data
				this.$util.hideAll()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor,
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
		}
	}
</script>


<style lang="scss">
	.user-coupon-detail {
		padding: 0 20rpx;

		.qr-code {
			width: 320rpx;
			height: 320rpx;
			/* #ifdef H5 */
			border-radius: 16rpx;
			/* #endif */
		}

		.list-item {
			height: 190rpx;
			border-radius: 18rpx;

			.bg {
				opacity: 0.1;
				border-radius: 18rpx;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}


			.item-price {
				width: 200rpx;
				height: 190rpx;
				border-radius: 18rpx;
				overflow: hidden;

				.dot-item {
					width: 24rpx;
					height: 24rpx;
					top: 83rpx;
				}

				.dot-item.left {
					left: -12rpx;
				}

				.dot-item.right {
					right: -12rpx;
				}
			}

		}

		.b-1px-b::after {
			color: #EAEAEA
		}
	}
</style>